<template>
    <!-- 条件 -->
    <h4>数据筛选</h4>
    <div class="search">
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="销售单号">
                <el-input v-model="form.marketId" placeholder="请输入/扫描单号" />
            </el-form-item>
            <el-form-item label="产品编号">
                <el-input v-model="form.productId" placeholder="请输入/扫描单号" />
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="form.productName" placeholder="请输入/扫描单号" />
            </el-form-item>
            <el-form-item label="订单状态">
                <!-- 下拉框 -->
                <el-select v-model="form.state" placeholder="请选择" style="width: 100px;">
                    <el-option label="全部" value="0" />
                    <el-option label="待审核" value=1 />
                    <el-option label="审核成功" value=2 />
                    <el-option label="审核失败" value=3 />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveData">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 数据列表 -->
    <h4>数据列表</h4>
    <el-table :data="ShowMarket" border style="width: 100%">
        <el-table-column prop="gName" label="订单号" align="center" />
        <el-table-column prop="gName" label="产品名称" align="center" />
        <el-table-column prop="gName" label="产品编号" align="center" />
        <el-table-column prop="gName" label="产品规格" align="center" />
        <el-table-column prop="gName" label="单位" align="center" />
        <el-table-column prop="gName" label="单价" align="center" />
        <el-table-column prop="gName" label="数量" align="center" />
        <el-table-column prop="skuPrice" label="总额" align="center" />
        <el-table-column prop="skuPrice" label="出库数" align="center" />
        <el-table-column prop="skuPrice" label="客户编号" align="center" />
        <el-table-column prop="skuPrice" label="客户名" align="center" />
        <el-table-column prop="skuPrice" label="订单总额" align="center" />
        <el-table-column prop="skuPrice" label="状态" align="center" />
        <el-table-column prop="skuPrice" label="是否入账" align="center" />
        <el-table-column prop="goodsNum" label="退货" align="center" />
        <el-table-column prop="goodsNum" label="退货数" align="center" />
        <el-table-column prop="goodsNum" label="创建时间" align="center" />

        <el-table-column label="操作" align="center">
            <template #default="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row)">退货</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, inject, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const ShowMarket = ref([]);
const form = ref({
    // 销售单号
    marketId: '',
    productId: '',
    productName: '',
    state: 0
})
const page = ref({
    pageSize: 10,
    pageIndex: 1,
    
})
const saveData = () => {
    axios.get('/api/market/show', {
        params: form
    }).then(res => {
        ShowMarket.value = res.data;
    })
}
const handleEdit = (row: any) => {
    router.push({ path: '/system/markets/edit', query: { marketId: row.marketId } })
}

const handleDelete = (row: any) => {
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        axios.delete('/api/market/delete', {
            params: {
                marketId: row.marketId
            }
        }).then(res => {
            if (res.data == 1) {
                ElMessage({
                    type: 'success',
                    message: '删除成功!'
                })
                saveData();
            } else {
                ElMessage({
                    type: 'error',
                    message: '删除失败!'
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

onMounted(() => {
    saveData();
})

</script>